﻿@model Nop.Web.Models.Catalog.SearchFilterLevelValueModel
@{
    Layout = "_ColumnsTwo";

    //title
    NopHtml.AddTitleParts(T("PageTitle.Search").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-search-page");
}

@section CatalogFilters {
    @await Html.PartialAsync("_CatalogFilters", Model.CatalogProductsModel)
}

<div class="page search-page">
    <div class="page-title">
        <h1>@T("Search.FilterLevelValues")</h1>
    </div>
    <div class="page-body">
        <div class="search-input">
            <form asp-route="ProductSearchByFilterLevelValues" method="get">
                <div class="form-fields">
                    <div class="advanced-search">
                        @if (!Model.HideSearchFilterValue1)
                        {
                            <div class="inputs">
                                <label asp-for="fl1id">@T("Enums.Nop.Core.Domain.FilterLevels.FilterLevelEnum.FilterLevel1"):</label>
                                <select asp-for="fl1id" asp-items="Model.AvailableFilterLevel1Values" class="filter-level-select"
                                        data-trigger="filter-level1-select"
                                        data-url="@(Url.RouteUrl(NopRouteNames.Ajax.GET_FILTER_LEVEL_VALUES))"
                                        data-filterlevel2="#@Html.IdFor(model => model.fl2id)"
                                        data-filterlevel3="#@Html.IdFor(model => model.fl3id)"
                                        data-loading="#filter-levels-loading-progress">
                                </select>
                            </div>
                        }
                        @if (!Model.HideSearchFilterValue2)
                        {
                            <div class="inputs">
                                <label asp-for="fl2id">@T("Enums.Nop.Core.Domain.FilterLevels.FilterLevelEnum.FilterLevel2"):</label>
                                <select asp-for="fl2id" asp-items="Model.AvailableFilterLevel2Values" class="filter-level-select"
                                        data-trigger="filter-level2-select"
                                        data-url="@(Url.RouteUrl(NopRouteNames.Ajax.GET_FILTER_LEVEL_VALUES))"
                                        data-filterlevel1="#@Html.IdFor(model => model.fl1id)"
                                        data-filterlevel3="#@Html.IdFor(model => model.fl3id)"
                                        data-loading="#filter-levels-loading-progress">
                                </select>
                            </div>
                        }
                        @if (!Model.HideSearchFilterValue3)
                        {
                            <div class="inputs">
                                <label asp-for="fl3id">@T("Enums.Nop.Core.Domain.FilterLevels.FilterLevelEnum.FilterLevel3"):</label>
                                <select asp-for="fl3id" asp-items="Model.AvailableFilterLevel3Values" class="filter-level-select"></select>
                                <span id="filter-levels-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait")</span>
                            </div>
                        }
                    </div>
                    <div class="buttons">
                        <button type="submit" class="button-1 search-button-flv" disabled>@T("Search.Button")</button>
                    </div>
                </div>
            </form>
        </div>
        @await Html.PartialAsync("_CatalogSelectors", Model.CatalogProductsModel)
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductSearchPageBeforeResults, additionalData = Model })
        <div class="search-results">
            @{
                var catalogProductsViewData = new ViewDataDictionary(ViewData);
                catalogProductsViewData["fetchUrl"] = Html.Raw(Url.RouteUrl(NopRouteNames.Ajax.SEARCH_PRODUCTS_BY_FILTER_LEVEL_VALUES));
            }
            @await Html.PartialAsync("_CatalogProducts", Model.CatalogProductsModel, catalogProductsViewData)
        </div>
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.ProductSearchPageAfterResults, additionalData = Model })
    </div>
</div>

<script asp-location="Footer">
    $(function() {
        // Function to check if all visible filter levels have values selected
        function checkFilterSelections() {
            var searchButton = $('.search-button-flv');
            var allSelected = true;
            
            $('.filter-level-select:visible').each(function() {
                if (!$(this).val() || $(this).val() === 0 || $(this).val() === "0") {
                    allSelected = false;
                    return false;
                }
            });
            
            searchButton.prop('disabled', !allSelected);
        }

        // Check initial state
        checkFilterSelections();

        // Add change event listener to all filter selects
        $('.filter-level-select').on('change', function() {
            checkFilterSelections();
        });

        // Handle existing functionality for catalog products
        $(CatalogProducts).on('before', function (e) {
            e.payload.urlBuilder
                .addParameter('fl1id', $('#@Html.IdFor(model => model.fl1id)').val())
                .addParameter('fl2id', $('#@Html.IdFor(model => model.fl2id)').val())
                .addParameter('fl3id', $('#@Html.IdFor(model => model.fl3id)').val());
        });
    });
</script>